<template>
 <el-container :style="{ height: containerHeight + 'px' }">
    <!-- 左侧部门树形菜单列表 -->
    <el-aside
      style="
      padding: 10px 0px 0px 0px;
      background: #fff;
      border-right: 1px solid #dfe6ec;
      "
      width="200px"
    >
      <el-tree
        ref="leftTree"
        style="font-size: 14px"
        :data="deptList"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        empty-text="暂无数据"
        :show-checkbox="false"
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <div>
            <span v-if="data.children.length == 0">
              <i class="el-icon-document" />
            </span>
            <span v-else @click.stop="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <!-- 名称 -->
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div>
        </div>
      </el-tree>
    </el-aside>
    <!-- 右侧用户数据 -->
    <!-- 表格数据 -->
    <el-main>
      <!-- 查询条件 -->
      <el-form
        ref="searchForm"
        :model="searchModel"
        label-width="55px"
        :inline="true"
        size="mini"
      >
        <el-form-item>
          <el-input v-model="searchModel.jobNum" placeholder="工号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchModel.realName" placeholder="姓名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchModel.departmentName" placeholder="部门" />
        </el-form-item>

        <el-form-item>
          <span  slot="label">
            <span class="formLabel"><strong>状态</strong></span>
          </span>
          <el-select v-model="searchModel.status" placeholder="请选择" style="width: 180px">
            <el-option
              v-for="item in statusOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            size="mini"
            @click="search(departmentId, pageNo, pageSize)"
          >查询</el-button>
          <el-button icon="el-icon-delete" @click="resetValue()" size="mini">重置</el-button>
        </el-form-item>
            <div style="margin: 0px 0px 5px 0px">
          <el-button
            style="font-size: 10px"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="openAddWindow()"
          >新增</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-upload2"
            size="mini"
            type="success"
            plain
            @click="importExcel()"
          >导入</el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-download"
            size="mini"
            type="primary"
            plain
            @click="dowonloadExcel()"
          >导出</el-button>
      </div>
      </el-form>
      <!-- 用户表格数据 -->
      <el-table
        class="tableBox"
        style="width: 100%; margin-bottom: 10px; font-size: 15px"
        :height="tableHeight"
        :data="userList"
        border
        stripe
      >
          <el-table-column prop="jobNum" label="工号" />
          <el-table-column prop="realName" label="姓名" />
          <el-table-column prop="jobName" label="岗位"/>
          <el-table-column prop="departmentName" label="部门"/>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope" style="font-size: 6px">
              <el-tag v-if="scope.row.status === 1" type="success" size="mini" style="font-size: 6px">在职</el-tag>
              <el-tag v-else type="danger" size="mini" style="font-size: 6px">离职</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" class="el_t_operate_cls" width="420px">
            <template slot-scope="scope">
              <el-button
                style="font-size: 10px"
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-button
                style="font-size: 10px"
                icon="el-icon-delete"
                type="danger"
                size="mini"
                @click="handleDelete(scope.row)"
                v-if="hasPermission('sys:user:delete')"
              >删除</el-button>
              <el-button
                style="font-size: 10px"
                icon="el-icon-setting"
                type="primary"
                size="mini"
                @click="assignRole(scope.row)"
              >分配角色</el-button>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页工具栏 -->
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />


  <!-- 添加和编辑用户窗口 -->
  <system-dialog
    :title="userDialog.title"
    :height="userDialog.height"
    :width="userDialog.width"
    :visible="userDialog.visible"
    @onClose="onClose"
    @onConfirm="onConfirm"
  >
    <div slot="content">
      <el-form
        ref="userForm"
        :model="user"
        :rules="rules"
        label-width="120px"
        :inline="true"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item prop="jobNum" label="工号">
          <el-input v-model="user.jobNum" class="f-item"/>
        </el-form-item>
        <el-form-item prop="realName" label="姓名">
          <el-input v-model="user.realName" class="f-item"/>
        </el-form-item>


        <el-form-item prop="departmentName" label="部门" class="f-item">
          <el-input
            class="f-item"
            v-model="user.departmentName"
            :readonly="true"
            @click.native="selectDepartment()"
          />
        </el-form-item>

        <el-form-item prop="jobName" label="岗位">
          <!-- <el-input v-model="user.jobName" class="f-item"/> -->
          <div class="block" style="width: 237px">
            <el-cascader
              v-model="opsVal"
              placeholder="搜索：岗位名称/编码"
              :options="jobOps"
              filterable></el-cascader>
          </div>
        </el-form-item>

        <el-form-item prop="phone" label="手机号码">
          <el-input v-model="user.phone" class="f-item"/>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="user.email" class="f-item"/>
        </el-form-item>

        <el-form-item prop="status"  label="状态">
          <span  slot="label">
            <span class="formLabel"><strong>状态</strong></span> 
          </span>
          <el-checkbox v-model="checked"></el-checkbox>
          <span>
            <span class="formLabel"><strong> 在职</strong></span> 
          </span>
        </el-form-item>

        <!-- <el-form-item prop="gender" label="性别">
          <el-radio-group v-model="user.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <br>
        <!-- 用户头像：待补充 -->
      </el-form>
    </div>
  </system-dialog>

    <!-- 所属部门弹框 -->
    <system-dialog
      :title="parentDialog.title"
      :width="parentDialog.width"
      :height="parentDialog.height"
      :visible="parentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
    >
      <div slot="content">
        <el-tree
          ref="parentTree"
          :data="parentList"
          default-expand-all
          node-key="id"
          :props="parentProps"
          :show-checkbox="false"
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="parentClick"
        >
          <div slot-scope="{ node, data }" class="customer-tree-node">
            <span v-if="data.children.length == 0">
              <i class="el-icon-document" />
            </span>
            <span v-else @click.stop="openParentBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>

    <!-- 分配角色窗口 -->
    <system-dialog
      :title="assignDialog.title"
      :height="assignDialog.height"
      :width="assignDialog.width"
      :visible="assignDialog.visible"
      @onClose="onAssignClose"
      @onConfirm="onAssignConfirm"
    >
      <div slot="content">
        <!-- 分配角色数据列表 -->
        <el-table
          ref="assignRoleTable"
          :data="assignRoleList"
          border
          stripe
          :height="assignHeight"
          style="width: 100%; margin-bottom: 10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column prop="roleCode" label="角色编码" />
          <el-table-column prop="roleName" label="角色名称" />
          <el-table-column prop="remark" label="角色备注" />
        </el-table>
        <!-- 分页工具栏 -->
        <el-pagination
          :current-page.sync="roleVo.pageNo"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="roleVo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="roleVo.total"
          background
          @size-change="assignSizeChange"
          @current-change="assignCurrentChange"
        />
      </div>
    </system-dialog>

    <!-- 导入 -->
    <upload-excel-dialog
      :title="uploadDialog.title"
      :visible="uploadDialog.visible"
      :width="uploadDialog.width"
      :height="uploadDialog.height"
      @onClose="onClose"
    >
      <div slot="content">
        <el-form label-width="99px">
          <el-form-item label="信息描述" >
            <span  slot="label">
              <span class="formLabel"><strong>模板</strong></span>
            </span>
            <el-tag>
              <i class="el-icon-download"/>
              <a
                :href="'/static/data1.xlsx'">下载模版</a>
            </el-tag>
          </el-form-item>

          <el-form-item label="">
            <span  slot="label">
              <span class="formLabel"><strong>选择文件</strong></span>
            </span>
            <el-upload
              ref="upload"
              :before-upload="beforeUpload"
              :on-change="uploadChange"
              :auto-upload="false"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :on-exceed="handleExceed"
              :limit="1"
              :file-list="fileList"
              :headers="TOKEN"
              :action="BASE_API+'api/warehouse/import'"
              false
              手动上传
              name="file"
              accept="application/vnd.ms-excel,.xls,.xlsx">
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <el-button
                  :loading="loading"
                  style="margin-left: 10px;"
                  size="mini"
                  type="success"
                  @click="submitUpload">{{ fileUploadBtnText }}
                </el-button>
                <p slot="tip" class="el-upload__tip">支持文件格式 .xls .xlsx, 且不超过10mb</p>
              </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </upload-excel-dialog>

    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

//导入部门api脚本
import departmentApi from '@/api/department';
import empApi from '@/api/organization/employee';
import jobApi from '@/api/organization/job';

//导入用户api脚本
import {getUserList,addUser,updateUser,deleteUser,getAssignRoleList,getRoleIdByUserId,assignRoleSave} from '@/api/user';
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue'
import SystemInfoDialog from '@/components/system/SystemInfoDialog.vue';
import UploadExcelDialog from '@/components/system/UploadExcelDialog';

export default {
  name: 'UserList',
  components: {
    SystemDialog,
    UploadExcelDialog
  },
  data() {
        // 自定义验证规则
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
        // 使用正则表达式进行验证手机号码
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确'))
      } else {
        callback()
      }
    }
    return {
      
      checked: false,
      // 分配角色窗口属性
      assignDialog: {
        title: '',
        visible: false,
        width: 800,
        height: 350
      },
      // 角色对象
      roleVo: {
        pageNo: 1,
        pageSize: 10,
        userId: '',
        total: 0
      },
      assignRoleList: [], // 角色列表
      assignHeight: 0, // 分配角色表格高度
      selectedIds: [], // 被选中的角色id
      selectedUserId: '', // 被分配角色的用户ID
// -----------------------------------------------
      containerHeight: 0, // 容器高度
      deptList: [], // 左侧部门树形菜单列表
      // 树节点属性
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      },
            // 选择所属部门窗口属性
      parentDialog: {
        title: '选择所属部门',
        width: 300,
        height: 450,
        visible: false
      },
      // 树节点属性
      parentProps: {
        children: 'children',
        label: 'departmentName'
      },
      parentList: [], // 所属部门节点数据
      
      // 查询条件对象
      searchModel: {
        jobNum: '',
        realName: '',
        status: '',
        departmentName: '',
        departmentId: '',
        departmentCodeLists: [],
        pageNo: 1,
        pageSize: 10
      },

      childIds: [],

      userList: [], // 用户列表
      tableHeight: 0, // 表格高度
      pageNo: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 0, // 总数量
      departmentId: '', // 部门编号

      // 添加和修改用户窗口属性
      userDialog: {
        title: '',
        height: 410,
        width: 800,
        visible: false
      },
      uploadDialog: {
        title: '',
        visible: false,
        height: 300,
        width: 600
      },
      // 用户对象
      user: {
        id: '',
        jobNum: '',
        jobId: '',
        jobName: '',
        status: '',
        realName: '',

        departmentId: '',
        departmentName: '',
        
        email: '',
        realName: '',
        phone: '',
        nickName: '',
        password: '',
        username: '',
        gender: '',
        avatar: '',
      
      },

      rules: {
        departmentName: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        realName: [{ required: true, trigger: 'blur', message: '请填写姓名' }],
        phone: [{ trigger: 'blur', validator: validatePhone }],
        username: [{ required: true, trigger: 'blur', message: '请填写登录名' }],
      },

      statusOpts: [{
        value: 0,
        label: '离职'
      }, {
        value: 1,
        label: '在职'
      }],

      jobOps: [],
      
      opsVal:[],

      ID: {
        ids: []
      },

      // 上传文件
      // limitNum: 1,  // 上传excell时，同时允许上传的最大数
      BASE_API: process.env.VUE_APP_BASE_API,
      TOKEN: {"token": getToken()},
      // //上传后的文件列表
      fileList: [],
      fileUploadBtnText: '导 入', // 按钮文字
      importBtnDisabled: false, // 按钮是否禁用,
      loading: false,
      fileListLen: 0
    }
  },
  created() {
    // 查询部门列表
    this.getDeptList()
    // 调用查询用户列表
    this.search(this.departmentId)
 
  },
  mounted() {
    this.$nextTick(() => {
      //内容高度
      this.containerHeight = window.innerHeight - 85
      //表格高度
      this.tableHeight = window.innerHeight - 300
      //角色表格高度
      this.assignHeight = window.innerHeight - 350;
    })

    this.getJobOps()
  },
  methods: {
      // ======================文件导入==============================
      // 文件状态改变时的函数
      uploadChange(file, fileList) {
          this.file = file.raw
          // 问题一方案：验证文件数量，替换后仅保留第一个文件
          if (fileList.length > 1) {
            fileList.splice(0, 1)
          }
          this.fileListLen = fileList.length
        },

      handleExceed(files, fileList) {
        this.$message.warning(`只能选择 1 个文件，当前共选择了 ${files.length + fileList.length} 个`);
      },

      // 提取文件后缀名
      getSuffix(str) {
        const fileExtension = str.substring(str.lastIndexOf(".") + 1);
        return fileExtension;
      },

      //导入前判断
      beforeUpload(file,fileList) {
        let suffix = this.getSuffix(file.name);
        if (suffix !== "xlsx") {
          this.$message.error("文件格式只能是.xlsx");
          return false;
        }
      },

      submitUpload() {
        if (this.fileListLen === 0) {
           this.$message.warning("选择文件");
        }else {
          this.fileUploadBtnText = '正在导入...'
          this.importBtnDisabled = true
          this.loading = true
          // 使用vue中的表单提交
          this.$refs.upload.submit()
          this.fileListLen = 0
        }

      },

      // 上传成功
      fileUploadSuccess(response) {
        // 提示信息
        this.loading = false
        this.$message({
          type: 'success',
          message: '导入成功！'
        })
        this.importBtnDisabled = false
        // 跳转到课程分类列表，使用路由跳转
        this.uploadDialog.visible = false   
        this.search()
        this.fileUploadBtnText = '导 入'
        this.fileListLen = 0
      },

      // 上传失败
      fileUploadError() {
        // 提示信息
        this.loading = false
        this.$message({
          type: 'error',
          message: '导入失败！'
        })
        this.importBtnDisabled = false
        this.fileListLen = 0
      },

      // 导入excel
      importExcel() {
        this.fileListLen = 0
        this.fileList = [],
        this.uploadDialog.title = '导入数据'// 设置窗口标题
        this.uploadDialog.visible = true // 显示窗口
      },

      dowonloadExcel() {
        axios({
          method: "get",
          url: this.BASE_API+"api/employee/export",
          responseType: 'blob',
          headers: {
            "token": getToken()
          }
        })
        .then(resp => {
          if (!resp) {
              this.$message.warning("导出数据失败！")
              return
          }
          const link = document.createElement('a');
          let blob = new Blob([resp.data], {type: 'application/vnd.ms-excel'});
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);

          link.setAttribute('download', '职员列表' + '.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      },
      // ===========================================================

    // 所有的岗位信息下拉列表
    async getJobOps() {
       const resp = await jobApi.getJobOps()
       if (resp.code === 20000) {

         this.jobOps = resp.data
       }
    },
    /**
      * 打开分配角色
      */
    async assignRole(row) {
      // 防止回显出现问题
      this.selectedIds = []
      this.selectedUserId = ''
      // 被分配用户的id
      this.selectedUserId = row.id
      // 显示窗口
      this.assignDialog.visible = true
      // 设置标题
      this.assignDialog.title = `给【${row.realName}】分配角色`
      // 查询当前登录用户的所有角色信息
      await this.getAssignRoleList()
      // 获取当前被分配用户的ID
      const param = {
        userId: row.id
      }
      // 发送根据用户ID查询角色列表的请求
      const res = await getRoleIdByUserId(param)
      // 如果存在数据
      if (res.success && res.data) {
        // 将查询到的角色ID列表交给选中角色数组
        this.selectedIds = res.data
        // 循环遍历
        this.selectedIds.forEach((key) => {
          this.assignRoleList.forEach((item) => {
            if (item.id == key) {
              this.$refs.assignRoleTable.toggleRowSelection(item, true)
            }
          })
        })
      }
    },
   /**
    * 查询当前登录用户的所有角色信息
    */
    async getAssignRoleList(pageNo = 1, pageSize = 10) {
      // 给用户ID赋值
      this.roleVo.userId = this.$store.getters.userId
      this.roleVo.pageNo = pageNo
      this.roleVo.pageSize = pageSize
      // 发送查询请求
      const res = await getAssignRoleList(this.roleVo)
      // 判断是否成功
      if (res.success) {
        // 角色列表赋值
        this.assignRoleList = res.data.records
        // 角色总数量赋值
        this.roleVo.total = res.data.total - 0
      }
    },
    /**
    * 查询部门列表
    */
    async getDeptList() {
      // 发送查询请求
      const res = await departmentApi.getDepartmentList(null)
      // 判断是否成功
      if (res.success) {
        this.deptList = res.data
      }
    },
    // 加减号图标点击事件
    openBtn(data) {
      // 修改折叠展开状态
      data.open = !data.open
      this.$refs.leftTree.store.nodesMap[data.id].expanded = !data.open
    },
   /**
    * 左侧树节点点击事件
    */
    handleNodeClick(data) {
      // 给部门编号赋值
      this.departmentId = data.id
      this.childIds = data.children.map(o => {
        return o.id
      })

      // 查询数据
      this.search(this.departmentId)

    },
    /**
    * 查询用户列表
    */
    async search(departmentId, pageNo = 1, pageSize = 10) {
      this.searchModel.departmentCodeLists = this.childIds
      this.searchModel.pageNo = pageNo
      this.searchModel.pageSize = pageSize
      // 判断如果没有部门id或者是byd id为1是显示全部列表
      if (departmentId == 1 || departmentId == null) {
        this.searchModel.departmentId = ""
      }else{
        this.searchModel.departmentId = departmentId
      }
      this.childIds = []
      console.log("@@@",  this.searchModel)
      
      // 发送查询请求
      const res = await empApi.pageList(this.searchModel)
      if (res.success) {
        this.userList = res.data.records
        this.total = res.data.total - 0
        
      }else {
        
      }
    },
    /**
    * 当每页数量发生变化时触发该事件
    */
    handleSizeChange(size) {
      this.pageSize = size // 将每页显示的数量交给成员变量
      this.search(this.departmentId, this.pageNo, size)
    },
    /**
    * 当页码发生变化时触发该事件
    */
    handleCurrentChange(page) {
      this.pageNo = page
      // 调用查询方法
      this.search(this.departmentId, page, this.pageSize)
    },
    /**
    * 重置查询条件
    */
    resetValue() {
      // 清空查询条件
      this.searchModel = {}
      // 重新查询
      this.search(this.departmentId)
    },
  
   /**
    * 打开添加窗口
    */
    openAddWindow() {
      this.opsVal=[]
      this.checked = false
      this.$resetForm('userForm', this.user) // 清空表单
      this.userDialog.visible = true // 显示窗口
      this.userDialog.title = '新增用户' // 设置标题
    },
    /**
* 新增或编辑取消事件
*/
    onClose() {
      this.userDialog.visible = false // 关闭窗口
      this.uploadDialog.visible = false
    },
    
    /**
    * 新增或编辑确认事件
    */
    onConfirm() {
        
        this.user.jobId = this.opsVal[0]
        this.user.status = this.checked ? 1 : 0;
        
        this.$refs.userForm.validate(async(valid) => {
        if (valid) {
          let res = null
          // 判断用户ID是否为空
          if (this.user.id === '') {
            // 新增
            // 发送添加请求
            res = await empApi.addObj(this.user)
          } else {
            // 发送修改请求
            res = await empApi.updateObj(this.user)
          }
          // 判断是否成功
          if (res.success) {
            this.$message.success(res.message)
            // 刷新
            this.search(this.departmentId, this.pageNo, this.pageSize)
            // 关闭窗口
            this.userDialog.visible = false
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },

    /**
    * 打开选择上级部门窗口
    */
    async selectDepartment() {
      // 查询上级部门数据
      const res = await departmentApi.getDepartmentList(null)
      // 判断是否成功
      if (res.success) {
        this.parentList = res.data
      }
      // 显示窗口
      this.parentDialog.visible = true
    },

    /**
    * 选择上级部门取消事件
    */
    onParentClose() {
      this.parentDialog.visible = false // 关闭窗口
    },

    /**
    * 选择上级部门确认事件
    */
    onParentConfirm() {
      this.parentDialog.visible = false
    },
    // 上级部门树节点点击事件
    parentClick(data) {
      this.user.departmentId = data.id
      this.user.departmentName = data.departmentName
    },
    // 上级部门树加号 减号 图标点击事件
    openParentBtn(data) {
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    },
        /**
    * 编辑用户
    */
    handleEdit(row) {

      // 把当前编辑的数据复制到表单数据域，供回显使用
      this.$objCopy(row, this.user)
      this.checked = this.user.status == 1 ? true : false;
      // 字符串
      this.opsVal = [row.jobId]
      // 设置弹框属性
      this.userDialog.title = '编辑用户'
      this.userDialog.visible = true
    },
        /**
    * 删除
    */
    async handleDelete(row) {
      const confirm = await this.$myconfirm('确定要删除该数据吗?')
      if (confirm) {
        // 封装条件
        this.ID.ids  = [row.id];
        const params =  this.ID
        // 发送删除请求
        const res = await empApi.del(params)
        // 判断是否成功
        if (res.success) {
          this.$message.success(res.message)
          // 刷新
          this.search(this.departmentId, this.pageNo, this.pageSize)
        } else {
          this.$message.error(res.message)
        }
      }
    },
   /**
    * 分配角色取消事件
    */
    onAssignClose() {
      // 隐藏窗口
      this.assignDialog.visible = false
    },
    /**
    * 分配角色确认事件
    */
    async onAssignConfirm() {
      // 判断用户是否有选中角色
      if (this.selectedIds.length === 0) {
        this.$message.warning('请选择要分配的角色！')
        return
      }
      const params = {
        userId: this.selectedUserId,
        roleIds: this.selectedIds
      }
      // 发送请求
      const res = await assignRoleSave(params)
      // 判断是否成功
      if (res.success) {
        this.$message.success(res.message)
        // 关闭窗口
        this.assignDialog.visible = false
      } else {
        this.$message.error(res.message)
      }
    },
    /**
    * 当每页数量发生变化时触发该事件
    */
    assignSizeChange(size) {
      this.roleVo.pageSize = size // 将每页显示的数量交给成员变量
      this.getAssignRoleList(this.roleVo.pageNo, size)
    },
    /**
    * 当页码发生变化时触发该事件
    */
    assignCurrentChange(page) {
      this.roleVo.pageNo = page
      // 调用查询方法
      this.getAssignRoleList(page, this.roleVo.pageSize)
    },
    /**
    * 当点击多选框时触发该事件
    */
    handleSelectionChange(rows) {
      const roleIds = []
      // 循环遍历选中的角色ID
      for (let i = 0; i < rows.length; i++) {
        // 将当前选中的角色ID放到数组中
        roleIds.push(rows[i].id)
      }
      // 将选中的角色ID交给成员变量
      this.selectedIds = roleIds
      // this.selectedIds = rows.map(item => item.id);//等同于上述代码
    },
    
  }
}
</script>

<style lang="scss">

.f-item>>>.el-input__inner {
   width: 151px;
}

// el-table 表格行高设置
.tableBox {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}
</style>